<template>
  <div :class="advanced ? 'search' : null">
    <a-form :form="form" layout="horizontal">
      <div :class="advanced ? null : 'fold'"><slot :advanced="advanced"></slot></div>
      <div class="operator table-operations">
        <a-button :loading="loading" @click="search" icon="search" type="primary">搜索</a-button>
        <a-button v-if="$listeners.download" @click="download" icon="download" type="primary">导出</a-button>
        <a-button @click="handleReset">重置</a-button>
        <a v-if="multiRows" @click="toggleAdvanced"> {{ advanced ? '收起' : '展开' }}<a-icon :type="advanced ? 'up' : 'down'" /> </a>
      </div>
    </a-form>
  </div>
</template>

<script>
export default {
  name: 'SearchForm',
  props: {
    loading: {
      type: Boolean,
      required: true
    },
    multiRows: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      advanced: false,
      form: this.$form.createForm(this, { name: 'searchForm' })
    }
  },
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    search() {
      this.$emit('search', this.form.getFieldsValue())
    },
    download() {
      this.$emit('download', this.form.getFieldsValue())
    },
    handleReset() {
      this.form.resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.search {
  margin-bottom: 3px;
}
.fold {
  width: calc(100% - 308px);
  display: inline-block;
}
.operator {
  float: right;
  margin-top: 3px;
}
@media screen and (max-width: 900px) {
  .fold {
    width: 100%;
  }
}
</style>
